<template>
  <s-layout :bgStyle="template.style?.background" :navbarStyle="template.style?.navbar" navbar='inner'
            tabbar="/pages/brand/index">
    <view class="tab-wrapper">
      <view class="tab">
        <view v-for="(item,index) in tabs" :key="index" :class="{active:current==index}" class="tab-item"
              @click="handleTab(index)">{{ item }}
        </view>
      </view>
      <view class="search" @click="sheep.$router.go('/pages/index/search')">
        <image class="image" mode="aspectFill" src="/static/search.png"></image>
      </view>
    </view>
    <view class="tab-select" v-show="current==1">
      <view class="tab-item" v-for="(item,index) in tabList" :class="{active:tabIndex==index}"
            @click="handleSelectTab(index)" :key="index">{{ item }}
      </view>
    </view>
    <view class="filtrate-wrapper" v-show="current==0||current==1">
      <view @click="handleShow" class="filtrate-left">{{ selectIndex == null ? '发行方' : issuerList[selectIndex] }}
        <image class="image" mode="widthFix" src="/static/down.png"></image>
      </view>
      <view class="filtrate-right" v-show="current==1">
        <image class="image" mode="widthFix" src="/static/love.png"></image>
        我关注的
      </view>
    </view>
    <view class="apply" @click="showQrModal" v-show="current==2">
      申请入驻 +
    </view>
    <view class="line"></view>
    <view class="list">
      <view v-show="current==0">
        <pro-one />
      </view>
      <view v-show="current==1">
        <pro-two />
      </view>
      <view v-show="current==2">
        <pro-third />
      </view>
    </view>
    <su-popup :round="60" :show="show" :showClose="true" @close="hideModal">
      <view class="popup-wrapper">
        <view class="popup-title">选择发行方</view>
        <view class="popup-body">
          <view v-for="(item,index) in issuerList" :class="{active:selectIssuer===index}" @click="handleSelect(index)"
                :key="index"
                class="popup-item">
            {{ item }}
          </view>
        </view>
      </view>
    </su-popup>
    <su-popup :round="60" :show="showQr" :showClose="true" @close="hideQrModal">
      <view class="qr-wrapper">
        <view class="qr-title">添加平台联系人即可申请入住</view>
        <view class="qr-img" id="qr">
          <uv-qrcode ref="qrcode" size="400rpx" value="https://h5.uvui.cn"></uv-qrcode>
        </view>
        <view class="qr-tips">
          微信扫一扫添加
        </view>
        <view class="qr-btn" @click="handleSave">
          保存
        </view>
      </view>
    </su-popup>
  </s-layout>
</template>

<script setup>
  import { computed, nextTick, ref } from 'vue';
  import sheep from '@/sheep';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
  import proOne from '@/pages/components/pro-one.vue';
  import proTwo from '@/pages/components/pro-two.vue';
  import proThird from '@/pages/components/pro-third.vue';
  import SuPopup from '@/sheep/ui/su-popup/su-popup.vue';

  const template = computed(() => sheep.$store('app').template?.home);
  const current = ref(0);
  const tabs = ['品牌孵化', '市场', '品牌'];
  const handleTab = (index) => {
    current.value = index;
  };


  const show = ref(false);
  const handleShow = () => {
    selectIssuer.value = selectIndex.value;
    show.value = !show.value;
  };
  const selectIndex = ref(null);
  const selectIssuer = ref(null);
  const issuerList = ref(['全部作者', '全部作者', '全部作者', '全部作者', '全部作者']);
  const handleSelect = (index) => {
    if (selectIssuer.value === index) {
      selectIssuer.value = null;
    } else {
      selectIssuer.value = index;
    }
  };
  const hideModal = () => {
    selectIndex.value = selectIssuer.value;
  };

  const qrcode = ref(null);
  const showQr = ref(false);
  const tabIndex = ref(0);
  const tabList = ref(['全部', '生态区', '全部作者', '全部作者', '生态区', '全部作者', '全部作者', '全部作者']);
  const handleSelectTab = (index) => {
    tabIndex.value = index;
  };

  const showQrModal = () => {
    showQr.value = true;
  };
  const hideQrModal = () => {
    showQr.value = false;
  };
  const save = path => {
    uni.saveImageToPhotosAlbum({
      filePath: path,
      success() {
        uni.showToast({
          title: '保存成功',
        });
      },
    });
  };
  const handleSave = () => {
    nextTick(() => {
      qrcode.value.toTempFilePath({
        success: (res) => {
          let { tempFilePath } = res;
          save(tempFilePath);
        },
      });
      // qrcode.value.save({
      //   success: (res) => {
      //     console.log(res);
      //   }
      // });
    });
  };

</script>

<style lang="scss" scoped>
  .tab-wrapper {
    padding: 0 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .tab {
      display: flex;
      align-items: center;
    }

    .search {
      width: 30rpx;
      height: 30rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .tab-item {
      color: #767676;
      font-size: 28rpx;
      margin-right: 50rpx;

      &:last-child {
        margin-right: 0;
      }

      &.active {
        font-size: 36rpx;
        color: #ffffff;
      }
    }
  }

  .filtrate-wrapper {
    margin-top: 30rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 30rpx;
    font-size: 28rpx;
    color: #EBEBEB;
    height: 58rpx;

    .filtrate-left {
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        margin-left: 10rpx;
        width: 18rpx;
      }
    }

    .filtrate-right {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 170rpx;
      height: 58rpx;
      background: #1E1E1E;
      border-radius: 29rpx;

      image {
        margin-right: 10rpx;
        width: 24rpx;
      }
    }
  }

  .apply {
    padding: 0 30rpx;
    font-size: 28rpx;
    color: #13C093;
    margin-top: 55rpx;
    margin-bottom: 30rpx;
  }

  .tab-select {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10rpx 0 30rpx;
    margin-top: 46rpx;

    .tab-item {
      height: 54rpx;
      background: #1E1E1E;
      border-radius: 27rpx;
      min-width: 122rpx;
      padding: 0 10rpx;
      line-height: 54rpx;
      text-align: center;
      font-size: 24rpx;
      color: #767676;
      margin-right: 20rpx;
      margin-bottom: 20rpx;

      &.active {
        color: #13C093;
      }
    }
  }

  .line {
    margin-top: 30rpx;
    border-bottom: 1rpx solid #262626;
    margin-bottom: 20rpx;
  }

  .popup-wrapper {
    height: 700rpx;

    .popup-title {
      text-align: center;
      height: 120rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #303030;
      font-size: 36rpx;
      color: #F5F6F8;
    }

    .popup-body {
      padding: 30rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .popup-item {
        text-align: center;
        background: #1E1E1E;
        border-radius: 42rpx;
        height: 84rpx;
        font-weight: 400;
        font-size: 30rpx;
        color: #767676;
        line-height: 84rpx;
        width: calc((750rpx - 80rpx) / 2);
        margin-bottom: 20rpx;

        &.active {
          color: #13C093;
        }
      }
    }
  }

  .qr-wrapper {
    height: 900rpx;
    display: flex;
    padding: 20rpx;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;

    .qr-title {
      font-size: 40rpx;
      text-align: center;
      color: #FFFFFF;
    }

    .qr-img {
      width: 385rpx;
      height: 385rpx;
      background: #FFFFFF;
      border-radius: 40rpx;
      padding: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .qr-tips {
      text-align: center;
      font-size: 26rpx;
      color: #888888;
    }

    .qr-btn {
      text-align: center;
      width: 250rpx;
      height: 82rpx;
      line-height: 82rpx;
      background: linear-gradient(90deg, #45C9F0, #36F6AF);
      border-radius: 41rpx;
      font-size: 30rpx;
      color: #090909;
    }
  }
</style>
